import { useRef, useContext } from 'react';
import StoreContext from './context';
import { observer } from 'mobx-react'
import { TodoStore } from './store';
const TodoStatus = observer(() => {
  const { todosStore } = useContext(StoreContext);
  return <p>未完成的事项 { todosStore.unCompletedCount}</p>
});
const Todo = observer(({ todo }) => {
  return (
    <li>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => todo.toggle()}
      />
      {todo.text}
    </li>
  )
});
const TodoList = observer(() => {
  const { todosStore } = useContext(StoreContext);
  return (<ul>
    {
      todosStore.list.map((todo, index) => (
        <Todo todo={todo} key={index} />
      ))
    }
  </ul>)
});
const AddTodo = observer(() => {
  const { todosStore } = useContext(StoreContext);
  const ref = useRef(null);
  return (
    <>
      <input ref={ref} type="text" />
      <button onClick={() => {
        const todo = new TodoStore(ref.current.value);
        todosStore.add(todo);
        ref.current.value = '';
      }}>
        添加
      </button>
    </>
  )
});

export default observer(() => (
  <div>
    <AddTodo />
    <TodoList />
    <TodoStatus />
  </div>
))